<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
      <script>
        function upDownOperation(element)
    {
        var _input = element.parent().find('input'),
            _value = _input.val(),
            _step = _input.attr('data-step') || 1;
        //检测当前操作的元素是否有disabled，有则去除
        element.hasClass('disabled') && element.removeClass('disabled');
        //检测当前操作的元素是否是操作的添加按钮（.input-num-up）‘是’ 则为加操作，‘否’ 则为减操作
        if ( element.hasClass('weui-number-plus') )
        {
            var _new_value = parseInt( parseFloat(_value) + parseFloat(_step) ),
                _max = _input.attr('data-max') || false,
                _down = element.parent().find('.weui-number-sub');
            
            //若执行‘加’操作且‘减’按钮存在class='disabled'的话，则移除‘减’操作按钮的class 'disabled'
            _down.hasClass('disabled') && _down.removeClass('disabled');
            if (_max && _new_value >= _max) {
                _new_value = _max;
                element.addClass('disabled');
            }
        } else {
            var _new_value = parseInt( parseFloat(_value) - parseFloat(_step) ),
                _min = _input.attr('data-min') || false,
                _up = element.parent().find('.weui-number-plus');
            //若执行‘减’操作且‘加’按钮存在class='disabled'的话，则移除‘加’操作按钮的class 'disabled'
            _up.hasClass('disabled') && _up.removeClass('disabled');
            if (_min && _new_value <= _min) {
                _new_value = _min;
                element.addClass('disabled');
            }
        }
        _input.val( _new_value );
    }
	  
	     
  $(function(){
$('.weui-number-plus').click(function(){
        upDownOperation( $(this) );
    });
    $('.weui-number-sub').click(function(){
        upDownOperation( $(this) );
    });
 
 //评分js
 var arr = ["1分","2分","3分","4分","5分"];
	var num = -1;
	$(".weui-rater a").mouseover(function(){
		var thisL = $(this).index();
		for(var i = 0;i < thisL;i++){
			$(".weui-rater a").eq(i).addClass('checked');
		}
		for(var i = thisL; i < 5;i++){
			$(".weui-rater a").eq(i).removeClass('checked');
		}
		$(this).addClass('checked');
	})
	$(".weui-rater a").mouseout(function(){
		var thisL = $(this).index();
		for(var i = thisL; i < 5;i++){
			$(".weui-rater a").eq(i).removeClass('checked');
		}
	})
	$(".weui-rater").mouseout(function(){
		
		for(var i = 0; i < num;i++){
			$(".weui-rater a").eq(i).addClass('checked');
		}
	})
  $(".weui-rater a").click(function(){
		var thisL = $(this).index();
		$("#fen").html(arr[thisL]);
		$(this).addClass('checked');
		num = thisL+1;
		console.log(num);
	})
	
 });      
      </script>
</head>

<body ontouchstart style="background-color: #f8f8f8;">
<div class="weui_cells weui_cells_form ">


<div class="weui_cell">
 <div class="weui_cell_bd weui_cell_primary"> <p>相隔2</p> </div>
  <div style="font-size: 0px;" class="weui_cell_ft">
   <a class="weui-number weui-number-sub needsclick">-</a>
   <input pattern="[0-9]*" class="weui-number-input" style="width: 50px;" value='1'  data-min="1" data-max="10" data-step="2">
    <a class="weui-number weui-number-plus needsclick">+</a> 
    </div> <div class="weui_cell_ft" style="display: none;"> 0 </div> </div>
            
            
            
<div class="weui_cell">
 <div class="weui_cell_bd weui_cell_primary"> <p>相隔1</p> </div>
  <div style="font-size: 0px;" class="weui_cell_ft">
   <a class="weui-number weui-number-sub needsclick">-</a>
   <input pattern="[0-9]*" class="weui-number-input" style="width: 50px;" value='0'  data-min="0" data-max="10" data-step="1">
    <a class="weui-number weui-number-plus needsclick">+</a> 
    </div> <div class="weui_cell_ft" style="display: none;"> 0 </div> </div>
    
</div>

<div class="page-hd">
 <div class="weui-rater">
  <a data-num = "0" class="weui-rater-box checked"> <span class="weui-rater-inner">★</span> </a>
  <a data-num = "1" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
  <a data-num = "2" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
  <a data-num = "3" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
  <a data-num = "4" class="weui-rater-box"> <span class="weui-rater-inner">★</span> </a>
   </div>

<div id='fen' class="weui_cells_title"></div>
</div>
</body>
</html>
